page{
	font-size: 28rpx;
	color: #333333;
	background-color: #F6F6F6;
}
@mixin fontNSC($number,$size,$color) {
  font-size: $number;
  font-weight: $size;
  color: $color;
}
:root {
    --primary-red-color: #D22C14;
}

/* 首页店铺 收藏的店铺 */
.shop-box{
	margin: 0 24rpx;
	.shop-item{
		width: 702rpx;
		margin-bottom: 16rpx;
		background-color: #fff;
		border-radius: 16rpx;
		.shopImg{
			width: 154rpx;
			height: 154rpx;
			border-radius: 12rpx;
			background-color: #ddd;
			margin: 16rpx;
		}
		.refer{
			width: 516rpx;
			padding: 16rpx;
			.refer-item1{
				margin-bottom: 6rpx;
				text{
					width: 416rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #222222;
				}
				image{
					width:  29rpx;
					height: 26rpx;
				}
			}
			.refer-item2{
				margin-bottom: 10rpx;
			}
			.refer-item2 text:last-child,.refer-item3{
				color: #636363;
			}
			.refer-item2 .ellip2{
				width: 300rpx;
			}
			.refer-item3{
				.add{
					width: 21rpx;
					height: 23rpx;
					margin-right: 6rpx;
				}
				.distance{margin-top: 11rpx;}
				.btn{
					margin-bottom: 5rpx;
					width: 144rpx;
					height: 48rpx;
				}
			}
		}
	}
}


.messages{
	position: relative;
	image{
		width: 32rpx;
		height: 35rpx;
	}
	.tips{
		min-width: 25rpx;
		height: 25rpx;
		line-height: 25rpx;
		text-align: center;
		border-radius: 12.5rpx;
		background-color: #E81414;
		position: absolute;
		top: -10rpx;
		right: -12rpx;
		color: #fff;
		font-size: 22rpx;
		padding: 0 6rpx;
	}
}

.custom .state,.business .state{
		width: 48rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		border-radius: 6rpx;
		background-color: #0080FF;
		margin-right: 20rpx;
		color: #fff;
	}
.custom .contact .bold,.business .contact .bold{
	font-size: 32rpx;
	font-weight: bold;
	color: #000;
}
.custom {
	margin: 32rpx;
	.contact{
		width: 486rpx;
		margin-right: 20rpx;
		.bold{
			margin-bottom: 10rpx;
			text{
				color: #333;
			}
		}
		.add{
			color: #444;
		}
	}
}
.business{
	margin: 0 32rpx 32rpx;
	border-top: 1rpx solid $uni-border-color;
	padding: 32rpx 0 0;
	.contact{
		width: 486rpx;
		.bold{
			margin-bottom: 10rpx;
		}
		.tel{
			font-weight: bold;
			color: #333;
			margin-bottom: 8rpx;
			.tel-pic{
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background-color: #E5F2FF;
				margin-left: 8rpx;
				image{
					width: 19rpx;
					height: 19rpx;
				}
			}
		}
		.add{
			color: #444;
		}
	}
}

.bottom-btn-box{
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 32rpx 32rpx 72rpx;
	background-color: #fff;
	z-index: 9;
	width: 100%;
}

.title-btn-receptacle{
	background-color: #fff;
	width: 100%;
	.item{
		padding: 18rpx 20rpx;
		font-size: 32rpx;
		color: $uni-text-color;
		position: relative;
		.black-line-vessel{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
		}
		.black-line{
			width: 88rpx;
			height: 4rpx;
			border-radius: 6rpx;
			background-color: #000;
		}
	}
	.active{
		color: #000000;
		font-weight: bold;
	}
}

.order-summary{
	width: 750rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #fff;
	color: #666;
	padding: 24rpx 24rpx 96rpx;
	z-index: 3;
	.line{
		color: #ccc;
		margin-right: 12rpx;
	}
	.top{
		margin: 0 0 5rpx;
		text{
			color: var(--primary-red-color);
			margin: 0 7rpx 0 4rpx;
		}
	}
	.mid{
		color: $uni-text-color;
		margin-bottom: 10rpx;
		text{
			color: var(--primary-red-color);
			font-weight: bold;
			font-size: 36rpx;
			margin: 0 16rpx 0 8rpx;
		}
		.triangle{border-radius: 5rpx;margin: 12rpx 0 0 4rpx;}
	}
	.bottom{
		color: #B7B7B7;
		font-size: 24rpx;
		view{
			color: #222222;
		}
	}
}

.rail-container{
	margin: 0 24rpx 20rpx;
	border-radius: 16rpx;
	background-color: #fff;
	overflow: hidden;
	.rail-cont{
		margin: -8rpx 32rpx 32rpx;
		color: #999;
		view:last-child{
			margin-top: 12rpx;
		}
	}
}
.rail-item{
	display: flex;
	justify-content: space-between;
}
.rail-item,.rail-item-noflex{
	width: 638rpx;
	min-height: 104rpx;
	padding: 32rpx 0;
	margin: 0 32rpx;
	text{
		font-weight: bold;
		min-width: 120rpx;
	}
	.maxW{
		max-width: 364rpx;
		text-align: right;
	}
	.minW120{
		min-width: 120rpx;
	}
	.state-red{
		color: #BE1C2D;
	}
	.state-blue{
		color: #0080FF;
	}
	.urgent{
		width: 88rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 8rpx;
		color:  #D22C14;
		background-color: #FFE5E5;
		margin-left: 16rpx;
	}
	.state-black{
		color: #000;
		image{
			width: 24rpx;
			height: 24rpx;
			margin-left: 16rpx;
		}
	}
	.text-black{
		color: #444;
	}
	.cont-black{
		color: #444;
		margin-top: 10rpx;
		view{
			margin-left: 16rpx;
		}
	}
	.red{
		color: #FF243B;
		font-weight: bold;
	}
	.state-grey{
		color: #999;
		max-width: 500rpx;
	}
	.back{
		margin-left: 4rpx;
	}
	.font32{
		font-size: 32rpx;
	}
}


.charge-rectangle-pot{
	display: flex;
	flex-wrap: wrap;
	.rectangle-item{
		width: 311rpx;
		height: 101rpx;
		padding: 12rpx 16rpx;
		margin: 8rpx;
		border-radius: 12rpx;
		background-color: #E1F0FF;
		background-image: linear-gradient(135deg, #E1F0FF 0%, #EFF6FF 100%);
		.txt{
			display: block;
			margin-bottom: 4rpx;
			color: #666666;
			font-size: 24rpx;
		}
		text{
			font-weight: bold;
			color: $uni-text-color;
		}
	}
}

/* 遮罩层*/
.co-popup{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
}
.co-popup-mask{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 98;
}

/* 成功图标 */
.success-receptacle{
	width: 303rpx;
	height: 303rpx;
	border-radius: 50%;
	background-color: rgba(0, 128, 255, 0.08);
	position: relative;
	.success-pot{
		width: 239rpx;
		height: 239rpx;
		border-radius: 50%;
		background-color: rgba(0, 128, 255, 0.17);
		.success-vessel{
			width: 163rpx;
			height: 163rpx;
			border-radius: 50%;
			background-color: #21B3FF;
			background-image: linear-gradient(135deg, #21B3FF 0%, #0080FF 100%);
			.short-side{
				width: 36rpx;
				height: 15rpx;
				border-radius: 8rpx;
				background-color: rgba(255, 255, 255, 0.7);
				transform: rotateZ(-135deg);
				transform-origin: center;
				margin: 0 0 -20rpx -50rpx;
				.long-side{
					width: 82rpx;
					height: 15rpx;
					border-radius: 8rpx;
					background-color: #fff;
					transform: rotateZ(90deg);
					transform-origin: left;
					margin-top: -8rpx;
				}
			}
		}
	}
	.round-1{
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		background-color: #67CCFF;
		position: absolute;
		top: 64rpx;
		left: 15rpx;
	}
	.round-2{
		width: 21rpx;
		height: 21rpx;
		border-radius: 50%;
		background-color: #FFEE4D;
		position: absolute;
		top: 223rpx;
		left: 15rpx;
	}
	.round-3{
		width: 13rpx;
		height: 13rpx;
		border-radius: 50%;
		background-color: #71E2FF;
		position: absolute;
		top: 51rpx;
		right: 28rpx;
	}
	.round-4{
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		background-color: #FFBA60;
		position: absolute;
		top: 127rpx;
		right: 28rpx;
	}
	.round-5{
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background-color: #84D6FF;
		position: absolute;
		top: 215rpx;
		right: 10rpx;
	}
}
/* 失败图标 */
.fail-receptacle{
	width: 163rpx;
	height: 163rpx;
	border-radius: 50%;
	background-color: #FF243B;
	background-image: linear-gradient(135deg, #FF243B 0%, #D22C14 100%);
	.side{
		width: 98rpx;
		height: 15rpx;
		border-radius: 8rpx;
		background-color: #fff;
		transform: rotateZ(45deg);
		.side{
			width: 98rpx;
			height: 15rpx;
			border-radius: 8rpx;
			background-color: #fff;
			position: relative;
			transform: rotateZ(90deg);
		}
	}
}
/* 下单洗涤蒙版层 */
.query-pot{
	margin-left: 11rpx;
	width: 35rpx;
	height: 35rpx;
	line-height: 35rpx;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	background-color: #BFBFBF;
	font-size: 26rpx;
}
.bottom-window-receptacle{
	width: 750rpx;
	height: 882rpx;
	border-radius: 32rpx 32rpx 0 0;
	padding-top: 32rpx;
	background-color: #fff;
	position: relative;
	z-index: 100;
	.title{
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 36rpx;
		text-align: center;
		color: #222;
	}
	.pic{
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		top: 40rpx;
		right: 32rpx;
	}
	.pic-left{
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		top: 40rpx;
		left: 32rpx;
	}
	//expense-detail组件样式
	.fee-item{
		margin: 0 32rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid rgba(229,229,229,0.6);
		.top{
			color: #000;
			margin-bottom: 10rpx;
			font-weight: bold;
		}
		.bottom{
			color: #444;
		}
		.bot-bot{
			color: #999;
			margin-top: 10rpx;
		}
		.red{
			color: #D22C14;
		}
		image{
			width: 148rpx;
			height: 148rpx;
			border-radius: 16rpx;
			margin: 0 16rpx 12rpx 0;
			background-color: #ddd;
		}
	}
	.fee-item:last-child{
		border-bottom: none;
	}
	.scrll-y{
		height: 88%;
	}
}
.back-to-top{
	position: fixed;
	// bottom: 500rpx;
	bottom: 300rpx;
	right: 10rpx;
	z-index: 999;
	font-size: 16rpx;
	// border: 2rpx solid #f5f5f5;
	// padding: 8rpx 12rpx;
	// border-radius: 10rpx;
	color: #ABABAB;
	background-color: #FFF;
	image{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
}

.item-bottom-border{
	// border-bottom: 1rpx solid #E5E5E5;
	border-bottom: 1rpx solid rgba(229,229,229,0.6);
}
.item-top-border{
	border-top: 1rpx solid rgba(229,229,229,0.6);
}

::v-deep .uni-forms {
	.uni-forms-item {
		margin-bottom: 0;
		&__label {
			display: none !important;
		}
		&__content {
			.uni-input-placeholder {
				color: #BFBFBF;
			}
			.uni-forms-item__error {
				pointer-events: none;
				top: calc(100% - 4rpx);
				text {
					white-space: nowrap;
					color: #f56c6c;
				}
			}
			.uni-easyinput__content {
				background-color: unset !important;
			}
			.uni-easyinput__content-input {
				text-align: right;
				padding: 0 !important;
				font-size: 32rpx;
			}
		}
	}
}
// 暂无
.empty-receptacle{
		color: #999;
		image{
			width: 124rpx;
			height: 124rpx;
		}
	}
